<template>
  <div class="outside-the-box">
    <div class="show-box">
      <header>{{name}}</header>
      <div class="block">
        <div class="img-block" v-if="details">
          <img :src="details.logo || 'http:\/\/vitec.oss-cn-shenzhen.aliyuncs.com\/vitec\/locales\/20180929\/manager.png'" alt="" srcset="">
        </div>
        <div class="show-num">
          <div class="show-data show-data-border">
            <div class="num">{{name}}</div>
            <div class="num-desc">职位名称</div>
          </div>
          <div class="show-data pl30">
            <div class="num">{{num_of_people}}</div>
            <div class="num-desc">就职人数</div>
          </div>
          <div class="details-remark" v-if="details">
            <p><span>备注：</span>{{remark}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="show-box">
      <header>岗位职员列表</header>
      <div class="block">
        <div class="operation handle-box">
          <div class="operation-row">
            <div class="operation-block" @click="addUserIntoRole">
              <i class="el-icon-circle-plus"></i>
              <span>新增</span>
            </div>
          </div>
        </div>
        <el-table class="table" v-if="details" :header-cell-style="getRowClass" style="width: 100%" :data="details.td">
          <el-table-column v-for="(item, index) in details.th" :key="index" :label="item.label" :prop="item.key"></el-table-column>
          <el-table-column label="操作" width="200" v-if="details && details.loginer == '是'">
            <template slot-scope="scope">
              <i class="el-icon-sort roate" v-if="scope.row.superAdmin === '是'" @click="attornSuperManager(true)"></i>
              <i class="el-icon-delete" v-else @click="delUserOutRole('manager', scope.row.userid)"></i>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" v-else-if="!details.loginer">
            <template slot-scope="scope">
              <el-button type="danger" @click="delUserOutRole(scope.row.userid)">
                <i class="el-icon-delete"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <wait-user-list v-on:changeIsShow="changeIsShow" v-on:handleCurrentChange="handleCurrentChange" :is_show="is_wait_user_show" :data="wait_add_user_list" :roleId="id"></wait-user-list>
    <attorn-super :is_show="is_attorn_super_manager_show" v-on:attornSuperManager="attornSuperManager"></attorn-super>
  </div>
</template>

<script>
import role from "@/api/role.js";
import WaitUserList from "./waitadduser.vue";
import AttornSuper from "./attorn.vue";

export default {
  name: "role-detail",
  components: {
    WaitUserList,
    AttornSuper
  },
  data() {
    return {
      details: undefined,
      num_of_people: 0,
      name: undefined,
      id: undefined,
      wait_add_user_list: undefined,
      is_wait_user_show: false,
      is_attorn_super_manager_show: false,
      remark: '即使搬砖，也要敬业!'
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
    this.remark = this.$route.query.remark;
    this.getData();
  },
  methods: {
    attornSuperManager(val) {
      this.is_attorn_super_manager_show = val;
    },
    getData() {
      if (this.id == "manage") {
        role
          .getManagerRole()
          .then(res => {
            this.details = res;
            if (res.td) {
              this.num_of_people = res.td.length;
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        role
          .getRoleDetail(this.id)
          .then(res => {
            this.details = res;
            if (res.td) {
              this.num_of_people = res.td.length;
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    getRowClass({ row, column, rowIndex, colIndex }) {
      if (rowIndex === 0) {
        return "background:#f5f7f9";
      }
    },
    delUserOutRole(userId) {
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          role
            .removeUserOutRole({ userid: userId, roleId: this.id })
            .then(res => {
              this.successCallBack("删除成功!");
            })
            .catch(err => {
              this.$message.error(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async addUserIntoRole() {
      if (this.id == "manage") {
        await role
          .getNoInManagerRoleList()
          .then(res => {
            this.wait_add_user_list = res;
            this.is_wait_user_show = true;
          })
          .catch(err => {
            this.$message.error(err);
          });
      } else {
        await role
          .getWorkerNoInRoleList({ roleId: this.id })
          .then(res => {
            this.wait_add_user_list = res;
            this.is_wait_user_show = true;
          })
          .catch(err => {
            this.$message.error(err);
          });
      }
    },
    changeIsShow(val) {
      this.is_wait_user_show = val[0];
      if(val[1]){
        this.getData();
      }
    },
    async handleCurrentChange(data) {
      await role
        .getWorkerNoInRoleList({
          roleId: this.id,
          pageNumber: data.val,
          name: data.name
        })
        .then(res => {
          this.wait_add_user_list = res;
        });
    },
    successCallBack(message) {
      this.$message({
        type: "success",
        message: message
      });
      this.getData();
    }
  }
};
</script>

<style scoped>
.show-box:nth-of-type(2) {
  margin-bottom: 40px;
}
.block {
  padding: 36px;
}
.img-block {
  display: inline-block;
  width: 150px;
  height: 150px;
}
.show-num {
  width: 40%;
  display: inline-block;
  height: 150px;
  vertical-align: top;
  margin-left: 15px;
}
.show-data {
  display: inline-block;
  height: 80px;
  padding-right: 24px;
}
.show-data .num-desc {
  margin-top: 10px;
}
.show-data-border {
  border-right: 1px solid #d8d8d8;
}
.pl30 {
  padding-left: 30px;
}
.num {
  font-size: 30px;
}
.num-desc {
  font-size: 14px;
  color: #a8acaf;
}
.details-remark {
  margin-top: 18px;
}
.details-remark span {
  color: #a8acaf;
}

.handle-box {
  height: 40px;
}
.roate {
  transform: rotate(90deg);
}
</style>
